<template>
  <div>
    <mt-field label="用户名" placeholder="请输入用户名" v-model="username">{{this.username}}</mt-field>
    <mt-field label="邮箱" placeholder="请输入邮箱" v-show="visible" type="email" v-model="email">{{this.email}}</mt-field>
    <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone">{{this.phone}}</mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password1">{{this.password1}}</mt-field>
    <mt-field label="重复密码" placeholder="请再输入密码" type="password" v-model="password2">{{this.password2}}</mt-field>
    <mt-button type="default" class="set-button1" @click="btnRegister">提交</mt-button>
    <mt-button type="default" class="set-button2" @click="btnChange">重置</mt-button>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
  import { Button } from 'mint-ui';
  import { Field } from 'mint-ui';
  export default {
    name: "regis-content",
    components:{
      MtField:Field,
      MtButton:Button
    },
    data:function () {
      return{
        username:'',
        email:'',
        password1:null,
        password2:null,
        phone:null,
        visible:true,
      }
    },
    methods:{
      btnChange:function () {
        this.username = '';
        this.email = '';
        this.password = null;
        this.phone = null;
      },
      btnRegister:function () {
        MessageBox('提示', '操作成功');
        this.$router.push('/');
      }
    }
  }
</script>

<style scoped>
  .set-button1{
    margin-top: 1rem;
    margin-left: 0rem;
    margin-right: 6.5rem;

  }
  .set-button1{
    margin-top: 1rem;
    margin-right: 3rem;
  }
</style>
